<template>
	<uv-picker ref="cityPicker" :columns="addressList" keyName="label" @change="change" @confirm="confirm"
		@close="close"> </uv-picker>
</template>
<script setup lang="ts">
	import { watch, watchEffect, reactive, ref, computed, onMounted } from 'vue';
	import type { Response, CityAddressType } from '@/core/models';
	import { queryAreas } from '@/core/api';

	const props = withDefaults(defineProps<{
		show : boolean,
		cityList : Array<CityAddressType>,
		pickerValue : string,
	}>(), {
		show: false,
		cityList: () => [],
		pickerValue: '',
	});

	const emit = defineEmits(['handleClosePicker', 'handleConfirmPicker']);

	const cityPicker = ref();

	const state = reactive<{
		provinces : Array<any>,
		citys : Array<any>,
		areas : Array<any>,
		cityList : Array<CityAddressType>,
		cityVal : Array<number>;
	}>({
		provinces: [], //省
		citys: [], //市
		areas: [], //区
		cityList: [],
		cityVal: [],
	})

	const addressList = computed(() => {
		return [state.provinces, state.citys, state.areas];
	})

	watch(() => props.show, (newVal : boolean) => {
		if (newVal) {
			cityPicker.value.open();
			if (props.pickerValue) {
				cityPicker.value.setIndexs(state.cityVal, true)
			}
		} else {
			cityPicker.value.close();
		}
	})

	watchEffect(() => {
		if (props.pickerValue && state.cityList.length > 0) {

			console.log('props.pickerValue', props.pickerValue);
			const cityName = props.pickerValue.split(' ');

			const province = state.cityList.find(x => x.label === cityName[0]);
			let provincesIndex : number = state.cityList.findIndex(((item : CityAddressType) => item.label === cityName[0]));

			let citysIndex : number = state.cityList[provincesIndex].children.findIndex((item : CityAddressType) => item.label === cityName[1])

			let areasIndex : number = state.cityList[provincesIndex].children[citysIndex].children.findIndex((item : CityAddressType) => item.label === cityName[2])

			state.cityVal = [provincesIndex, citysIndex, areasIndex];
			state.citys = province.children;
			state.areas = province.children[citysIndex].children;
		}
	});

	onMounted(() => {
		getAreas();
	})

	/** 获取城市列表 */
	const getAreas = async () => {
		const address : Response<Array<CityAddressType>> = await queryAreas();
		if (address.status) {
			state.cityList = address.data;
			/** 省 */
			state.provinces = address.data.map((item : CityAddressType) => {
				return {
					label: item.label,
					value: item.value,
					children: item.children,
				}
			});
			/** 市 */
			state.citys = address.data[0].children.map((item) => {
				return {
					label: item.label,
					value: item.value,
					children: item.children,
				}
			})
			/** 区 */
			state.areas = address.data[0].children[0].children.map((item) => {
				return {
					label: item.label,
					value: item.value,
				}
			})
		}
	}

	const change = (e : any) => {
		const { columnIndex, index, indexs } = e;
		if (columnIndex === 0) {
			state.citys = state.provinces[index]?.children || [];
			state.areas = state.citys[0]?.children || [];
			cityPicker.value.setIndexs([index, 0, 0], true);
		} else if (columnIndex === 1) {
			state.areas = state.citys[index]?.children || [];
			cityPicker.value.setIndexs(indexs, true)
		}
	}

	const confirm = (e : any) => {
		emit('handleClosePicker')
		emit('handleConfirmPicker', e.value)
	}

	const close = () => {
		emit('handleClosePicker')
	}
</script>
<style lang="scss" scoped></style>